<template>
  <div>
    <el-cascader
      v-model="current"
      :options="list"
      :show-all-levels="false"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
import { listAllFactorys } from "@/api/factory";
import { findTreeNode } from "@/utils/tree";
export default {
  data() {
    return {
      list: [],
      current: [],
    };
  },
  created() {
    listAllFactorys().then((res) => {
      if (res?.data) {
        res.data.forEach((factory) => {
          let item1 = {
            value: factory.factoryDeptCode,
            label: factory.factoryName,
            children: [],
          };
          factory.workshopVos?.forEach((workshop) => {
            //注胚车间可选
            if (workshop.workshopType == "INJECTION") {
              let item2 = {
                value: workshop.workshopId,
                label: workshop.workshopName,
                properties: {...workshop}
              };
              item1.children.push(item2);
            }
          });
          this.list.push(item1);
        });

        // 默认选中
        this.current = ["CRB-AK1", "26"];
        this.handleChange(this.current);
      }
    });
  },
  methods: {
    handleChange(value) {
      const item = findTreeNode(this.list, (node) => {
        return node.value == value[1];
      });
      this.$emit("workshop-change", item);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input.el-input--suffix {
  // 2.修改背景颜色、字体颜色、边框、宽高
  .el-input__inner {
    background: #010d50 !important;
    // border: 1px solid #010d50;
    border: 1px solid #fff;
    color: #fff;
    height: 30px;
    width: 200px;
  }

  // 符号的位置会错乱，进行修正（水平）
  .el-input__suffix-inner {
    position: absolute;
    left: -25px;
  }

  // 符号的位置会错乱，进行修正（垂直）
  .el-select__caret.el-input__icon.el-icon-arrow-up {
    line-height: 30px;
  }

  .el-input__inner::placeholder {
    color: #fff;
  }

  .el-icon-arrow-up:before {
    color: #fff;
  }
}

::v-deep {
  .el-cascader--medium {
    font-size: 14px;
    line-height: 36px;
  }
  .el-input--medium {
    font-size: 14px;
  }
  .el-input--medium .el-input__inner {
    line-height: 36px;
    padding-right: 30px;
  }
  .el-input__suffix {
    right: 5px;
  }
  .el-input--medium .el-input__icon {
    line-height: 36px;
  }
  .el-cascader .el-input .el-icon-arrow-down {
    font-size: 14px;
  }
}
</style>
